import Vue from 'vue'

import 'normalize.css/normalize.css' // A modern alternative to CSS resets

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

import '@/styles/index.scss' // global css

import App from './App'
import store from './store'
import router from './router'
import i18n from '@/lang'

import '@/icons' // icon
import '@/permission' // permission control
import plugin from '@/utils/plugin.js'

// 统一管理自定义指令,把从@/directive/index.js导入的所有的指令放在alldir对象中
import * as alldir from '@/directive/index.js'
import * as allFilter from '@/filter/index.js'
import Print from 'vue-print-nb'
Vue.use(Print);
Vue.use(plugin)

// 如果想要中文版 element-ui，按如下方式声明

Vue.config.productionTip = false

// console.log(alldir);
//通过Object.keys遍历对象,可以得到每一项的属性名,组成的一个数组
// console.log(Object.keys(alldir));
// 此时item就是每一个属性名,对象[key]取出值
Object.keys(alldir).forEach(item => {
  // Vue.directive(指令名（item），指令执行方法)
  Vue.directive(item, alldir[item])
})

// console.log(Object.keys(allFilter));
// console.log(allFilter);

Object.keys(allFilter).forEach(item => {
  Vue.filter(item, allFilter[item])
})

// 自定义指令解决图片渲染出错的问题
// directive有两个参数，第一个是指令名称，第二是对象，自定义指令执行的函数
// 方法有两个参数,第一个是需要操作的dom,第二个是使用时传的参数
// 使用：v-指令名称
// Vue.directive('errorimg',{
//   inserted(dom, options) {
//     // 图片有一个onerror事件，图片加载出错就会执行
//     // 图片加载没问题,不执行
//     dom.onerror = function () {
//       dom.src = options.value
//     }
//   }
// })

// Vue.directive('dir1',{
//   inserted() {
//     console.log('指令1');
//   }
// })

// Vue.directive('dir2',{
//   inserted() {
//     console.log('指令2');
//   }
// })

// Vue.use(ElementUI) 
// 设置element为当前的语言
Vue.use(ElementUI, {
  i18n: (key,value) => i18n.t(key,value)
})


new Vue({
  el: '#app',
  i18n,
  router,
  store,
  render: h => h(App)
})
